<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/theRank.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		initPage("排行榜", "rank");

		var app = new Vue({
			el: '#container',
			data: {
				rankList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				jump: function(url) {
					window.location.href = url;
				},
				week: getWeekList,
				month: getMonthList,
				total: getAllList,
			}
		})

		$('.am-slider').flexslider({
			animationLoop: false,
		});

		$('.body-bg,.icon-close').on('click', function() {
			$('.body-bg').hide();
			$('.alert-frame').hide();
		})

		// var rank_img = $('.rank-img').height();
		// var foot = $('.foot-demo').height();
		// var no_data = $('.no-data').height($(window).height() - rank_img - foot - 18);
		// $('.no_data').css('height',no_data);

		function getWeekList() {

			var weekSpan = $(".week-rank span");

			if(!weekSpan.hasClass("active")) {
				weekSpan.addClass("active");
				$(".month-rank span").removeClass("active");
				$(".year-rank span").removeClass("active");
			}

			$.ajax({
				url:"/wechat/rank/rankByWeek",
				type:"post",
				data:{},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					console.log(data);
					app.rankList = data;
				},
			})

		}

		function getMonthList() {

			var monthSpan = $(".month-rank span");

			if(!monthSpan.hasClass("active")) {
				monthSpan.addClass("active");
				$(".week-rank span").removeClass("active");
				$(".year-rank span").removeClass("active");
			}

			$.ajax({
				url:"/wechat/rank/rankByMonth",
				type:"post",
				data:{},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.rankList = data;
				},
			})

		}

		function getAllList() {

			var yearSpan = $(".year-rank span");

			if(!yearSpan.hasClass("active")) {
				yearSpan.addClass("active");
				$(".week-rank span").removeClass("active");
				$(".month-rank span").removeClass("active");
			}

			$.ajax({
				url:"/wechat/rank/rank",
				type:"post",
				data:{},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.rankList = data;
				},
			})

		}

		getWeekList();

	});


</script>
<div class="the-rank">
	<div class="am-slider am-slider-default" id="demo-slider-0">
	  <ul class="am-slides">
		  <foreach name="bannerList" item="vo">
			  <li v-on:click="jump('{$vo.target_url}')">
				  <img src="{$vo.image_url}" />
			  </li>
		  </foreach>
	  </ul>
	</div>
	<div class="rank-img">
		<div class="rank-total">
			<div>
				<div class="week-rank" v-on:click="week">
					<span class="active">周排行</span>
				</div>
				<div class="month-rank" v-on:click="month">
					<span>月排行</span>
				</div>
				<div class="year-rank" v-on:click="total">
					<span>总排行</span>
				</div>
			</div>
		</div>
	</div>

	<div class="no-data" v-if="rankList == null || rankList == ''">
		<p>暂无排行~</p>
	</div>

	<div class="rank-list" v-for="(index, rank) in rankList">

		<div class="line-body">
			<div class="rank-1" v-if="(index == 0)"></div>
			<div class="rank-2" v-if="(index == 1)"></div>
			<div class="rank-3" v-if="(index == 2)"></div>
			<div class="rank-other" v-if="(index > 2)">{{index+1}}.</div>
			<div class="user-img" style="background: url('{{rank.headimgurl}}')no-repeat center;background-size: cover;"></div>
			<div class="user-info">
				<p class="user-name color-font">{{rank.nickname}}</p>
				<p class="user-num color-66">开团 {{rank.total}} 次</p>
				<p class="user-num color-66">团胜 {{rank.win}} 次</p>
			</div>
			<div class="honr color-66">荣誉值</div>
			<div class="honr-score">{{rank.points}}</div>
		</div>
	</div>
</div>
<!-- <div class="body-bg"></div>
<div class="alert-frame">
	<i class="icon-close"></i>
	<div class="am-slider am-slider-default" id="demo-slider-0">
	  <ul class="am-slides">
		  <foreach name="bannerList" item="vo">
			  <li v-on:click="jump('{$vo.target_url}')">
				  <img src="{$vo.image_url}" />
			  </li>
		  </foreach>
	  </ul>
	</div>
</div> -->

<include file="./Template/footer.html" />